/**
 * NextJia架构图弹出对话框
 * 类似About和Keyboard Shortcuts的实现方式
 */

frappe.provide("frappe.ui.misc");

frappe.ui.misc.show_architecture_diagrams = function () {
    if (frappe.ui.misc.architecture_dialog) {
        frappe.ui.misc.architecture_dialog.show();
        return;
    }

    const dialog = new frappe.ui.Dialog({ 
        title: __("NextJia系统架构图"),
        size: 'extra-large'  // 使用大尺寸对话框
    });

    // 架构图HTML内容
    const architecture_html = `
        <div class="architecture-dialog-container">
            <style>
                .architecture-dialog-container {
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }

                .architecture-header {
                    text-align: center;
                    margin-bottom: 30px;
                    padding: 20px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                }

                .architecture-header h2 {
                    margin: 0 0 10px 0;
                    font-size: 1.8rem;
                    font-weight: 300;
                }

                .architecture-header p {
                    margin: 0;
                    font-size: 1rem;
                    opacity: 0.9;
                }

                .diagram-section {
                    margin-bottom: 40px;
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
                    overflow: hidden;
                }

                .section-header {
                    background: #f8f9fa;
                    padding: 15px 20px;
                    border-bottom: 1px solid #e9ecef;
                }

                .section-header h3 {
                    margin: 0;
                    color: #495057;
                    font-size: 1.4rem;
                    font-weight: 500;
                }

                .section-header p {
                    margin: 5px 0 0 0;
                    color: #6c757d;
                    font-size: 0.9rem;
                }

                .diagram-grid {
                    padding: 20px;
                }

                .main-architecture .diagram-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .module-architecture .diagram-grid {
                    display: grid;
                    grid-template-columns: 1fr;  /* 一行一个 */
                    gap: 15px;
                }

                .diagram-card {
                    background: white;  /* 白色背景 */
                    border: 1px solid #e9ecef;
                    border-radius: 6px;
                    overflow: hidden;
                    transition: transform 0.2s ease, box-shadow 0.2s ease;
                }

                .diagram-card:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                }

                .diagram-card h4 {
                    background: white;  /* 白色背景，不是蓝色 */
                    color: #495057;     /* 深灰色文字 */
                    margin: 0;
                    padding: 12px 15px;
                    font-size: 1.1rem;
                    font-weight: 500;
                    border-bottom: 1px solid #e9ecef;
                }

                .diagram-image {
                    position: relative;
                    overflow: hidden;
                    background: white;
                }

                .diagram-image img {
                    width: 100%;
                    height: auto;
                    display: block;
                }

                /* 响应式设计 */
                @media (max-width: 768px) {
                    .architecture-header h2 {
                        font-size: 1.5rem;
                    }
                    
                    .diagram-card h4 {
                        padding: 10px 12px;
                        font-size: 1rem;
                    }
                }
            </style>

            <!-- 页面标题 -->
            <div class="architecture-header">
                <h2>NextJia系统架构图</h2>
                <p>全面了解NextJia ERP系统的整体架构和各模块设计</p>
            </div>

            <!-- 主架构图部分 -->
            <div class="diagram-section main-architecture">
                <div class="section-header">
                    <h3>🏗️ 系统主架构</h3>
                    <p>NextJia ERP系统的整体架构设计，展示各个组件之间的关系和数据流向</p>
                </div>
                <div class="diagram-grid">
                    <div class="diagram-card">
                        <h4>NextJia主架构图</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia主架构图/主架构图.JPG" 
                                 alt="NextJia主架构图">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模块架构图部分 -->
            <div class="diagram-section module-architecture">
                <div class="section-header">
                    <h3>📦 业务模块架构</h3>
                    <p>各个业务模块的详细架构设计，包括数据流程和业务逻辑</p>
                </div>
                <div class="diagram-grid">
                    <div class="diagram-card">
                        <h4>💰 会计模块</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia模块架构图/会计模块.JPG" 
                                 alt="会计模块架构图">
                        </div>
                    </div>
                    
                    <div class="diagram-card">
                        <h4>📦 库存模块</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia模块架构图/库存模块.JPG" 
                                 alt="库存模块架构图">
                        </div>
                    </div>
                    
                    <div class="diagram-card">
                        <h4>🏭 生产模块</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia模块架构图/生产模块.JPG" 
                                 alt="生产模块架构图">
                        </div>
                    </div>
                    
                    <div class="diagram-card">
                        <h4>🛒 采购模块</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia模块架构图/采购模块.JPG" 
                                 alt="采购模块架构图">
                        </div>
                    </div>
                    
                    <div class="diagram-card">
                        <h4>💼 销售模块</h4>
                        <div class="diagram-image">
                            <img src="/assets/theme/images/NextJia模块架构图/销售模块.JPG" 
                                 alt="销售模块架构图">
                        </div>
                    </div>
                </div>
            </div>


        </div>
    `;

    $(dialog.body).html(architecture_html);



    frappe.ui.misc.architecture_dialog = dialog;
    frappe.ui.misc.architecture_dialog.show();
};